import React from 'react';
import BaseComp from "../Base/BaseComp";

import {Resizable} from "react-resizable";
import PropTypes from 'prop-types';


export default class ResizableBoxComp extends BaseComp {
    static propTypes = {
        height: PropTypes.number,
        width: PropTypes.number
    };

    static defaultProps = {
        handleSize: [20, 20]
    };

    state = {
        width: this.props.width,
        height: this.props.height,
        propsWidth: this.props.width,
        propsHeight: this.props.height,
    };

    static getDerivedStateFromProps(props, state) {
        // If parent changes height/width, set that in our state.
        if (state.propsWidth !== props.width || state.propsHeight !== props.height) {
            return {
                width: props.width,
                height: props.height,
                propsWidth: props.width,
                propsHeight: props.height,
            };
        }
        return null;
    }

    constructor(props) {
        super(props);
    }

    componentDidMount() {

    }

    onResize = (e, data) => {
        const {size} = data;

        if (this.props.onResize) {
            e.persist && e.persist();
            this.setState(size, () => this.props.onResize && this.props.onResize(e, data));
        } else {
            this.setState(size);
        }
    };

    mainRender(context) {
        // Basic wrapper around a Resizable instance.
        // If you use Resizable directly, you are responsible for updating the child component
        // with a new width and height.
        const {
            handle, handleSize, onResize, onResizeStart, onResizeStop, draggableOpts, minConstraints,
            maxConstraints, lockAspectRatio, axis, width, height, resizeHandles, ...restProps
        } = this.props;
        return (
            <Resizable
                handle={handle}
                handleSize={handleSize}
                width={this.state.width}
                height={this.state.height}
                onResizeStart={onResizeStart}
                onResize={this.onResize}
                onResizeStop={onResizeStop}
                draggableOpts={draggableOpts}
                minConstraints={minConstraints}
                maxConstraints={maxConstraints}
                lockAspectRatio={lockAspectRatio}
                axis={axis}
                resizeHandles={resizeHandles}
            >
                {this.props.children({
                    width: this.state.width + "px",
                    height: this.state.height + "px"
                })}
            </Resizable>
        );
    }
}
